<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>Hiring-</title>
        <%@ include file="/WEB-INF/view/common/import.jsp"%>
    </head>
    <body>
    	<div class="container">
    		省/直辖市：<select id="province"></select>
    		城市：<select id="city"></select>
    		区/县：<select id="area"></select>
    	</div>
    	
    	<script>
    		var province = $('#province');
    		var city = $('#city');
    		var area = $('#area');
    		
    		//  JSON字符串 -> JavaScript语法
    		var provinces = $.parseJSON('${provinceListStr}');
    		var provinceOptions = [];
    		for (var i = 0; i < provinces.length; i++) {
    			if (provinces[i].province == '重庆市') {
    				provinceOptions.push('<option value=' + provinces[i].provinceId + ' selected>' + provinces[i].province + '</option>');
    			} else {
    				provinceOptions.push('<option value=' + provinces[i].provinceId + '>' + provinces[i].province + '</option>');
    			}
    		}
    		province.append(provinceOptions.join(''));
    		
    		var defaultCitys = $.parseJSON('${cityListStr}');
    		var defaultCityOptions = [];
    		for (var i = 0; i < defaultCitys.length; i++) {
    			defaultCityOptions.push('<option value=' + defaultCitys[i].cityId + '>' + defaultCitys[i].city + '</option>');
    		}
    		city.append(defaultCityOptions.join(''));    	
    		
    		var defaultAreas = $.parseJSON('${areaListStr}');
    		var defaultAreaOptions = [];
    		for (var i = 0; i < defaultAreas.length; i++) {
    			if (defaultAreas[i].area == '九龙坡区') {
    				defaultAreaOptions.push('<option value=' + defaultAreas[i].areaId + ' selected>' + defaultAreas[i].area + '</option>');
    			} else {
    				defaultAreaOptions.push('<option value=' + defaultAreas[i].areaId + '>' + defaultAreas[i].area + '</option>');
    			}
    		}
    		area.append(defaultAreaOptions.join('')); 
    		
    		// 选择province显示province对应的城市
    		province.change(function() {
    			var param = {
    				command : 'listCityByProvinceId',
    				provinceId : this.value,
    				time: new Date().getTime()
    			}
    			$.get('<%=request.getContextPath()%>/CommonServlet', param, function(datas) {
    				// 清空city的所有option
    				city.empty();
    				// 再追加城市信息
    	    		var cityOptions = [];
    	    		for (var i = 0; i < datas[0].length; i++) {
    	    			cityOptions.push('<option value=' + datas[0][i].cityId + '>' + datas[0][i].city + '</option>');
    	    		}
    	    		city.append(cityOptions.join(''));    
    	    		// 清空area的所有option
    	    		area.empty();
    				// 再追加第一个城市所对应地区信息
    	    		var areaOptions = [];
    	    		for (var i = 0; i < datas[1].length; i++) {
    	    			areaOptions.push('<option value=' + datas[1][i].areaId + '>' + datas[1][i].area + '</option>');
    	    		}
    	    		area.append(areaOptions.join(''));    
    			}, 'json')
    		});
    		
    		
    		city.change(function() {
    			// do something...
    		})
    	</script>
    </body>
</html>
